<template>
    <el-dialog v-model="dialog" :title="title" width="90vw" :append-to-body="true" custom-class="iframeDialog">
        <div class="iframe-container">
            <iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" ref="iframeDom"></iframe>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { toRefs, computed, reactive } from 'vue'
export default {
    name: 'IframeDialog',
    props: {
        title: {
            type: String,
            default: '详情'
        },
        dialogVisible: {
            type: Boolean,
            defalut: false
        },
        url: {
            type: String,
            default: ''
        }
    },
    setup(props, context) {
        const { dialogVisible, url } = toRefs(props)
        const dialog = computed({
            get: () => dialogVisible.value,
            set: (val) => {
                context.emit('update:dialogVisible', val)
            }
        })
        const iframeUrl = computed({
            get: () => url.value,
            set: (val) => {
                context.emit('update:url', val)
            }
        })
        const state = reactive({
            iframeDom: null as HTMLIFrameElement | null,
			iframeLoading: true
        })
        return {
            dialog,
            iframeUrl,
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
.iframe-container{
    height: calc(90vh - 111px);
    iframe{
        height: calc(100% - 4px);
    }
}
</style>